<template>
  <view class='card_item'>
    <navigator
      :url="`/pages/goods/detail/detail?goodsId=${item.id}`"
      open-type="navigate"
      hover-class="navigator-hover"
    >
        <image :src="item.imageUrl" mode="" class='item_image' />
        <view class='item_text'>
            <view class='text_title'>{{item.name}}</view>
            <view class='text_price'>
                <view class='price'>￥ {{item.price}}</view>
                <view class='card_price'>￥ {{item.marketPrice}}</view>
                <image src="https://img02.hua.com/m/home/img/home_buy_btn.png" mode="" class='price_image' />
            </view>
        </view>
    </navigator>
  </view>
</template>

<script lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { defineComponent,ref } from 'vue'

export default defineComponent({
  name: 'card_item',
})
</script>

<script setup lang="ts">
const props = defineProps(['item'])
</script>

<style scoped>
.card_item {
  width: 175px;
  min-height: 275px;
  margin: 5px 0px;
  background: #fff;
}

.card_item .item_image {
  width: 175px;
  height: 195px;
}

.item_text {
  margin-top: 2px;
  width: 100%;
  font-size: 14px;
}

.item_text .text_title {
  margin: 5px;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.item_text .text_price {
  width: 100%;
  height: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

.text_price .price_image {
  width: 24px;
  height: 24px;
}

.text_price .card_price {
  text-decoration: line-through;
}
</style>